---
title: Map coordinates while dragging
description: A guide on how to use Fluid DnD to map coordinates of the translate property while dragging.
---

import ListWithMappedCoordinates from "@/components/vue/ListWithMappedCoordinates.vue";
import { Code } from "@astrojs/starlight/components";

### Locking axis example

If you want to map the coordinates of the translate property while dragging, you can use the `coordinateTransform` option.
First, we're going to add the `lockAxis` map:

export const listOfNumbers = `<script lang="ts">
	import { type Coordinate } from "fluid-dnd";

	const list = ref([...Array(20).keys()]);
	const lockAxis = (coordinate: Coordinate) => {
		return {
			x: 0,
			y: coordinate.y
		};
	};
  const [ parent ] = useDragAndDrop(list, {
		coordinateTransform: [ lockAxis ]
  });
</script>`;

export const highlightslockAxis = ['lockAxis', 'coordinateTransform'];

<Code code={listOfNumbers} lang="svelte" mark={highlightslockAxis} />

### Preview

<div class="p-8 bg-[var(--sl-color-gray-6)]">
	<ListWithMappedCoordinates client:load lockAxis={true} />
</div>

### Multiple mappers example

You can also use multiple mappers, those will be applied sequentially,
where the output of one mapping function becomes the input of the next.

In this example, we're going to add the `gridTranslate` map the coordinate to snap to a given grid size:

export const listOfNumbersGridTranslate = `<script lang="ts">
	//...
  const gridTranslate = ({ x, y }: Coordinate) => {
    const gridSize = 25.78;
    return {
      x: Math.ceil(x / gridSize) * gridSize,
      y: Math.ceil(y / gridSize) * gridSize
    };
  };
	//...

const [ parent ] = useDragAndDrop(list, {
		coordinateTransform: [lockAxis, gridTranslate]
  });
</script>`;

export const highlightsGridTranslate = ['gridTranslate'];


<Code code={listOfNumbersGridTranslate} lang="svelte" mark={highlightsGridTranslate}/>

### Preview

<div class="p-8 bg-[var(--sl-color-gray-6)]">
	<ListWithMappedCoordinates client:load lockAxis={true} gridTranslate={true}/>
</div>
